<template>
	<view class="body">
		<view class="nav row_align_center" id="nav">
			<li style="z-index: 999;font-size: 50rpx;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()">
			</li>
		</view>
		<view class="head">
			<view class="title">运动报告</view>
			<view class="customer_img">
				<open-data type="userAvatarUrl" class="img"></open-data>
			</view>
		</view>
		<view class="score_view">
			<view class="title">本次评分</view>
			<view class="detail">
				<view class="socre">98</view>
				<li :class="['iconfont icon-up text-green']" @click="gotoBack()"></li>
				<view class="up_socre">0.4</view>
			</view>
		</view>
		<view class="census_view">
			<view class="left">
				<view class="text_gray small_text">消耗(千卡)</view>
				<view class="middle_text text_wide_900">165</view>
			</view>
			<view class="right">
				<view class="text_gray small_text">心率主要集中在</view>
				<view style="font-size: 30rpx;">燃烧脂肪</view>
			</view>
		</view>
		<view class="census_view">
			<view class="left">
				<view class="text_gray small_text">时长(分钟)</view>
				<view class="middle_text text_wide_900">75</view>
			</view>
			<view class="center">
				<view class="text_gray small_text">累计打卡(天)</view>
				<view class="middle_text text_wide_900">24</view>
			</view>
			<view class="right">
				<view class="text_gray small_text">平均心率(次/分钟)</view>
				<view class="middle_text text_wide_900">98</view>
			</view>
		</view>
		<view class="consume_view">
			<view class="wrap"><span class="consume_tip">身体消耗</span></view>
			<li :class="['iconfont icon-niunai consume_icon']"></li>
			<view class="desc">
				<view class="small_text">约消耗</view>
				<view class="text_wide_900"><text class="left">1000</text><text class="right">毫升牛奶</text></view>
			</view>
		</view>
		<view class="heart_rate_view">
			<view class="left">
				<li :class="['iconfont icon-zhexiantu']"></li>
				<text class="title">心率变化曲线</text>
			</view>
			<view class="right text_gray">心率变化</view>
		</view>
		<view v-if="heartRateData.series" class="heart_rate_chart">
			<view class="charts-box">
				<qiun-data-charts type="tline" canvasId="sport_a" :canvas2d="isCanvas2d" :resshow="delayload"
					:opts="{padding:[0,20,10,0],legend:{position: 'top',lineHeight:20},xAxis:{disableGrid:true,format:'xAxisDemo3'},yAxis:{data:[{min:0,max:175}],gridType:'solid'},dataLabel:false,dataPointShape:false}"
					:chartData="heartRateData" />
			</view>
		</view>
		<view class="title_view">
			<view class="left">
				<li :class="['iconfont icon-xinlv']"></li>
				<text class="title">心率区间</text>
			</view>
		</view>
		<view class="heart_rate_range">
			<view class="top">
				<view class="item" v-for="(item,index) in heatRateRange" :key="index">
					<view class="name text_gray">{{item.name}}</view>
					<view class="data">{{item.type}}{{item.data}}<text class="unit text_gray">分钟</text></view>
				</view>
			</view>
			<view v-if="heartRateRangeData" class="charts-box">
				<qiun-data-charts type="ring" canvasId="sport_b" :canvas2d="isCanvas2d" :resshow="delayload"
					:opts="{legend:{position: 'bottom'},extra:{ring:{border:false,centerColor:'#312C34'}},title:{name: ''},subtitle: {name: ''}}"
					:chartData="heartRateRangeData" />
			</view>
		</view>
		<view class="title_view">
			<view class="left">
				<li :class="['iconfont icon-pie']"></li>
				<text class="title">运动分析</text>
			</view>
		</view>
		<view class="sport_analysis_view">
			<view class="top">
				<li class="iconfont icon-feiji"></li>
				<text class="title font-s-34">跑步机</text>
			</view>
			<view class="middle">
				<view class="left">
					<li class="iconfont icon-clock"></li>
					<view>3.24P.M</view>
				</view>
				<view class="right">
					<li class="iconfont icon-huo"></li>
					<view>热量消耗(千卡)</view>
				</view>
			</view>
			<view class="bottom">
				<view class="left">
					<li class="iconfont icon-kongxinyuan"></li>
					<view>燃烧脂肪</view>
				</view>
				<view class="right">
					<view class="text_wide_600 font-s-40">637</view>
				</view>
			</view>
		</view>
		<view class="box_view speed_rank_view">
			<view class="top">
				<view class="item" v-for="(item,index) in speedRank" :key="index">
					<view class="name text_gray">{{item.name}}</view>
					<view class="data">{{item.data}}<text class="unit text_gray">{{item.unit}}</text></view>
				</view>
			</view>
			<view v-if="speedRankData" class="charts-box">
				<qiun-data-charts
				    type="bar"
						canvasId="sport_c" :canvas2d="isCanvas2d" :resshow="delayload"
				    :chartData="speedRankData"
				    background="none"
						:opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
				  />
			</view>
		</view>
		<view class="box_view">
			<view v-if="speedAndRateData.series" class="charts-box">
				<qiun-data-charts type="tline" canvasId="sport_d" :canvas2d="isCanvas2d" :resshow="delayload"
					:opts="{padding:[0,20,10,0],legend:{position: 'top',lineHeight:20},xAxis:{disableGrid:true,format:'xAxisDemo3'},yAxis:{data:[{position:'left',min:0,max:25},{position:'right',min:50,max:175}],gridType:'solid'},dataLabel:false,dataPointShape:false}"
					:chartData="speedAndRateData" />
			</view>
		</view>
	</view>
</template>

<script>
	import heartRateData from "../../static/json/sport/1.json"
	import heartRateRangeData from "../../static/json/sport/2.json"
	import speedRankData from "../../static/json/sport/3.json"
	import speedAndRateData from "../../static/json/sport/4.json"
	export default {
		components: {

		},
		data() {
			return {
				info: this.$store.state.userInfo, //用户数据
				isCanvas2d: this.$Config.ISCANVAS2D,
				heartRateData: {},
				speedRankData:{},
				speedAndRateData:{},
				delayload:null,
				heartRateRangeData: {},
				heatRateRange: [{
						name: "激活放松",
						data: "5",
						type: "≤"
					},
					{
						name: "动态热身",
						data: "13",
						type: ""
					},
					{
						name: "脂肪燃烧",
						data: "24",
						type: ""
					},
					{
						name: "糖分消耗",
						data: "8",
						type: "≤"
					},
					{
						name: "心肺训练",
						data: "7",
						type: ""
					},
					{
						name: "极限锻炼",
						data: "16",
						type: ""
					},
				],
				speedRank: [{
						name: "距离",
						data: "5",
						unit:"公里"
					},
					{
						name: "时长",
						data: "12",
						unit: "分钟"
					},
					{
						name: "平均配速",
						data: "6\'05\"",
						unit: ""
					}
				]
			};
		},
		watch: {

		},
		methods: {
			async getData() {
				uni.showLoading();
				/*将钟点时间随机转成某一天的具体时间戳*/
				if(typeof heartRateData.series[0].data[0][0] == 'string'){
					for (let i = 0; i < heartRateData.series.length; i++) {
						heartRateData.series[i].data.map(x => {
							x[0] = "2018/08/08 " + x[0];
							x[0] = this.tranTimestamp(x[0]);
							return x[0];
						})
					}
					
				}
				if(typeof speedAndRateData.series[0].data[0][0] == 'string'){
					for (let i = 0; i < speedAndRateData.series.length; i++) {
						speedAndRateData.series[i].data.map(x => {
							x[0] = "2018/08/08 " + x[0];
							x[0] = this.tranTimestamp(x[0]);
							return x[0];
						})
					}
				}
				
				this.heartRateData = heartRateData;
				this.heartRateRangeData = heartRateRangeData;
				this.speedRankData = speedRankData;
				this.speedAndRateData = speedAndRateData;
				this.delayload = true;
				uni.hideLoading();
			},
			tranTimestamp(date) {
				return new Date(date).getTime()
			},
			gotoBack() {
				this.$Common.navigateBack("/index/index");
			},

		},
		onReady() {
			//#ifndef H5
			uni.showShareMenu();
			//#endif
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.body {
		height: 100%;
		background-color: #1C191F;
		margin: 0;
		color: #fff;
		padding: 80rpx 20rpx 0 20rpx;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 50rpx;
		
		.box_view{
			width: 100%;
			padding: 20rpx;
			position: relative;
			background-color: #312C34;
			color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 30rpx;
		}
		.speed_rank_view{
			.top {
				width: 100%;
			
				&:after {
					content: "";
					clear: both;
					display: block;
				}
			
				.item {
					float: left;
					width: 33%;
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					text-align: left;
			
					.name {
						font-size: 26rpx;
					}
			
					.data {
						font-size: 40rpx;
						margin-top: 10rpx;
			
						.unit {
							font-size: 24rpx;
							margin-left: 14rpx;
						}
					}
				}
			}
		}
		
		.sport_analysis_view {
			width: 100%;
			padding: 20rpx;
			position: relative;
			background-color: #312C34;
			color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;
		
			.top {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				.icon-feiji{
					margin-top: 10rpx;
				}
				.title{
					margin-left: 10rpx;
				}
			}
			.middle{
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				.iconfont{
					font-size: 28rpx;
					margin-right: 10rpx;
					margin-top: 4rpx;
				}
				.left{
					width: 50%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}
				.right{
					width: 50%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			.bottom{
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				.iconfont{
					font-size: 28rpx;
					margin-right: 10rpx;
					margin-top: 4rpx;
				}
				.left{
					width: 50%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.icon-kongxinyuan{
						color: #6FCEF7;
					}
				}
				.right{
					width: 50%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}

		.heart_rate_range {
			width: 100%;
			position: relative;
			background-color: #312C34;
			color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;

			.top {
				width: 100%;

				&:after {
					content: "";
					clear: both;
					display: block;
				}

				.item {
					float: left;
					width: 33%;
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					text-align: center;

					.name {
						font-size: 26rpx;
					}

					.data {
						font-size: 40rpx;
						margin-top: 10rpx;

						.unit {
							font-size: 24rpx;
							margin-left: 14rpx;
						}
					}
				}
			}
		}

		.heart_rate_chart {
			display: flex;
			justify-content: center;
			width: 100%;
			position: relative;
			background-color: #312C34;
			color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.title_view {
			display: flex;
			width: 100%;
			align-items: center;
			height: 150rpx;

			.left {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 40rpx !important;
				}

				.title {
					font-size: 34rpx;
					margin-left: 20rpx;
				}
			}
		}

		.heart_rate_view {
			display: flex;
			width: 100%;
			justify-content: space-around;
			align-items: center;
			height: 150rpx;

			.left {
				display: flex;
				align-items: center;

				.icon-zhexiantu {
					font-size: 26rpx;
				}

				.title {
					font-size: 34rpx;
					margin-left: 20rpx;
				}
			}

			.right {
				font-size: 22rpx;
				padding: 10rpx 30rpx;
				border-radius: 40rpx;
				background-color: #342E39;
			}
		}

		.consume_view {
			display: flex;
			justify-content: center;
			width: 100%;
			height: 190rpx;
			position: relative;
			margin-top: 100rpx;
			background-color: #312C34;
			color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 10rpx;

			.consume_img {
				width: 240rpx;
				height: auto;
				position: absolute;
				top: -80rpx;
				left: 20rpx;
			}

			.consume_icon {
				font-size: 220rpx;
				position: absolute;
				top: -80rpx;
				left: 20rpx;
			}

			.desc {
				position: absolute;
				right: 80rpx;
				top: 20rpx;

				view {
					padding: 10rpx 0;
					display: flex;
					align-items: center;
				}

				.left {
					font-size: 50rpx;
				}

				.right {
					font-size: 30rpx;
					margin-left: 10rpx;
					font-weight: 400;
				}
			}
		}

		.text-green {
			color: #10A764;
		}

		.text_gray {
			color: #8E8B8B;
		}

		.small_text {
			font-size: 24rpx;
		}
		
		.font-s-34{
			font-size: 34rpx;
		}
		
		.font-s-36{
			font-size: 36rpx;
		}
		
		.font-s-38{
			font-size: 38rpx;
		}
		
		.font-s-40{
			font-size: 40rpx;
		}

		.middle_text {
			font-size: 36rpx;
		}

		.text_wide_900 {
			font-weight: 900;
		}
		
		.text_wide_600 {
			font-weight: 600;
		}

		.census_view {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.left {
				text-align: left;

				view {
					padding: 10rpx 0;
				}
			}

			.center {
				text-align: center;

				view {
					padding: 10rpx 0;
				}
			}

			.right {
				text-align: right;

				view {
					padding: 10rpx 0;
				}
			}
		}

		.score_view {
			width: 100%;

			.title {
				color: #8E8B8B;
				font-size: 24rpx;
			}

			.detail {
				height: 120rpx;
				width: 100%;
				display: flex;
				align-items: flex-end;

				.icon-up {
					margin-left: 40rpx;
					height: 54rpx;
					font-weight: 600;
				}

				.socre {
					font-size: 80rpx;
					font-weight: 900;
				}

				.up_socre {
					color: #10A764;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}

		.head {
			height: 140rpx;
			line-height: 140rpx;
			position: relative;

			.title {
				font-size: 40rpx;
				margin-left: 20rpx;
			}

			.customer_img {
				position: absolute;
				bottom: 0rpx;
				right: 20rpx;
				width: 100rpx;
				height: 100rpx;
				margin: 0;
				padding: 0;
				background-size: 100% 100%;
				border-radius: 100%;
				overflow: hidden;

				.img {
					height: 100%;
					width: 100%;
				}
			}
		}

		li {
			list-style-type: none;
		}

		.nav {
			position: fixed;
			top: 50rpx;
			left: 20rpx;
		}
	}

	.consume_view:nth-child(even) {
		margin-right: 4%;
	}

	.consume_tip {
		display: inline-block;
		text-align: center;
		width: 188rpx;
		height: 30rpx;
		line-height: 30rpx;
		position: absolute;
		top: 36rpx;
		right: -44rpx;
		z-index: 2;
		overflow: hidden;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		border: 1px dashed;
		box-shadow: 0 0 0 3px #10A764, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
		background: #10A764;
		font-size: 16rpx;
	}

	.wrap {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -12rpx;
		left: 12rpx;
		overflow: hidden;
	}

	.wrap:before {
		content: "";
		display: block;
		border-radius: 8px 8px 0px 0px;
		width: 80rpx;
		height: 14rpx;
		position: absolute;
		right: 68rpx;
		top: -1px;
		background: #4D6530;
	}

	.wrap:after {
		content: "";
		display: block;
		border-radius: 0px 8px 8px 0px;
		width: 14rpx;
		height: 80rpx;
		position: absolute;
		right: -1px;
		top: 66rpx;
		background: #4D6530;
	}
</style>
